<template>
  <div class="">
    <div class="check-con">
      <el-steps direction="vertical" :active="18" :space="80" finish-status="success">
        <template v-for="item in stepArr">
          <el-step :title="item.txt" icon="el-icon-warning-outline" :status="item.type == 1 ? 'success' : item.type == 2 ? 'finish' : 'error'
            ">
            <template v-slot:description>
              <div style="color: #909399">
                结果：{{
                  item.type == 1
                    ? '合格'
                    : item.type == 2
                      ? '基本合格'
                      : '不合格'
                }}
              </div>
              <div style="color: #909399" v-if="item.type != 1">
                问题：{{ item.desc }}
              </div>
            </template>
          </el-step>
        </template>
      </el-steps>
    </div>

    <div style="margin-top: 30px; text-align: center">
      <el-button type="plain" icon="el-icon-arrow-left" @click="prevStep()">返回</el-button>
      <el-button type="primary" @click="submit()">提交审核<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
  </div>
</template>

<script>
import jbstep from './step.vue'
import { ElMessage } from 'element-plus'
export default {
  name: 'Role',
  dicts: ['sys_normal_disable'],
  components: { jbstep },
  data() {
    return {
      stepArr: [
        {
          type: '1',
          txt: '基本信息'
        },
        {
          type: '1',
          txt: '负责人任职'
        },
        {
          type: '2',
          txt: '现有内设机构',
          desc: '内设机构规定数量不超过6个，并且不允许设置派出机构。请做出相应整改。'
        },
        {
          type: '1',
          txt: '内部建设'
        },
        {
          type: '3',
          txt: '党建工作情况',
          desc: '党建活动太少，未有效开展，群团活动也为有效开展。'
        },
        {
          type: '1',
          txt: '财务会计报告'
        },
        {
          type: '1',
          txt: '资产负债表'
        },
        {
          type: '1',
          txt: '业务活动表'
        },
        {
          type: '1',
          txt: '现金流量表'
        },
        {
          type: '1',
          txt: '捐赠资助/使用'
        },
        {
          type: '1',
          txt: '公益慈善支出'
        },
        {
          type: '1',
          txt: '上年度整改'
        }
      ],

      activeStep: 0,
      value1: true,
      value2: false,
      value3: false
    }
  },
  created() { },
  methods: {
    prevStep() {
      this.activeStep = this.activeStep == 0 ? 0 : --this.activeStep
    },
    nextStep() {
      this.activeStep = this.activeStep == 9 ? 9 : ++this.activeStep
    },
    backStep(index) {
      this.activeStep = index
    },
    submit() {
      ElMessage({
        message: '审核成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped lang="scss">
//隐藏滚轮
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

::v-deep .el-step__icon.is-icon {
  border-radius: 50%;
  border: 2px solid;
  border-color: inherit;
}

::v-deep .el-step__title {
  font-size: 14px;

  .is-finish {
    font-weight: lighter;
  }
}

::v-deep .el-step__head.is-finish,
::v-deep .el-step__title.is-finish {
  color: #ff9800;
  border-color: #ff9800;
}

// ::v-deep .el-step__head.is-success,
// ::v-deep .el-step__title.is-success {
//   color: #FF9800;
//   border-color: #FF9800;
// }

// ::v-deep .el-step__head.is-error,
// ::v-deep .el-step__title.is-error {
//   color: #FF9800;
//   border-color: #FF9800;
// }

.check-con {
  width: 100%;
  height: 640px;
  display: flex;

  ::-webkit-scrollbar {
    width: 0;
  }

  ， //将宽度设为0，滚动条就会隐藏。

  ::-webkit-scrollbar {
    display: none;
  }

  .check-item-result {
    width: 220px;
    margin-left: 10px;
    height: 600px;
    overflow: auto;

    .item-check {
      margin-bottom: 40px;

      .check-title {
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;

        &::before {
          position: absolute;
          content: '';
          background: #2652b3;
          height: 18px;
          width: 5px;
          border-radius: 2px;
          left: 0;
          top: 1px;
        }
      }
    }
  }

  .check-info {
    flex: 1;
    height: 600px;
    overflow: auto;
    padding-right: 20px;

    >div {
      transition: all 0.5s ease-in-out;
    }
  }
}
</style>
